<template>
  <div>
    <div :style="`overflow-x: auto;overflow-y: auto;height:${Height};margin-top:15px`">
      <div class="list-item-box" v-for="(item,index) in listData" :key="index">
        <i v-if="item.iskey==1" class="el-icon-star-on" style="color:#ea5e56;padding-right:5px" />
        <i v-if="item.iskey==0" class="el-icon-star-on" style="color:#ddd;padding-right:5px" />
        <div class="constrc-box">
          <div>{{item.project_name}}</div>
          <div
            :class="['constrc-item',{'active1': ite.status === -2,
         'active2': ite.status === -1,'active3': ite.status === 0, 
         'active4': ite.status ===1,'active5': ite.status ===2,
         'active6': ite.status ===3,'active7': ite.status ===4,
         'active8': ite.status ===5}]"
            v-for="(ite,idx) in item.datas"
            :key="idx"
          >
            <div
              :class="['text-color','clearfix',{'gray': ite.status === -2,
         'red': ite.status === -1,'white': ite.status === 0,
         'green': ite.status === 1, 
         'yellow': ite.status === 2,'blue': ite.status === 3,
         'purple': ite.status === 4,'end': ite.status === 5}]"
            >
              <div style="padding: 1px 0 3px;">
                <i v-if="ite.stage===1" class="el-icon-caret-bottom" />
                <span>{{ite.stageName}}</span>
                <i
                  :class="{'el-icon-question':ite.passStatus===-1,
            'el-icon-success':ite.passStatus==1,
            'el-icon-error':ite.passStatus==0}"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <EditFormItem ref="form" :title="formTitle" :datas.sync="editRow" :baseStyle="baseStyle" />
  </div>
</template>

<script>
import EditFormItem from "./editFormItem";
export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      editRow: {},
      baseStyle: {
        width: "100px"
      },
      formTitle: "查看阶段"
    };
  },
  created() {
    // console.log(this.$props.listData,'compont-boxdDtas')
  },

  components: {
    EditFormItem
  },
  computed: {
    Height() {
      return document.documentElement.clientHeight - 190 + "px";
    }
  },
  methods: {
    checkItem(item) {
      this.$refs.form.openDialog();
      console.log(item, "item");
    }
  }
};
</script>

<style lang="scss" scoped>
.gray {
  //未开始 -2
  background: #a4a8ab;
}
.red {
  //异常 -1
  background: #ea5e56;
}
.white {
  //无匹配阶段 0
  background: #e0e0e0;
}
.green {
  //正常 1
  background: #4caf50;
}
.yellow {
  //暂停 2
  background: #f59c25;
}
.blue {
  //试运行 3
  background: #3cbaff;
}
.purple {
  //运维 4
  background: #9c27b0;
}
.end {
  //结束 5
  background: #d9b3b3;
}

.constrc-item.active1:after {
  border-left-color: #a4a8ab !important;
}
.constrc-item.active2:after {
  border-left-color: #ea5e56 !important;
}
.constrc-item.active3:after {
  border-left-color: #e0e0e0 !important;
}
.constrc-item.active4:after {
  border-left-color: #4caf50 !important;
}
.constrc-item.active5:after {
  border-left-color: #f59c25 !important;
}
.constrc-item.active6:after {
  border-left-color: #3cbaff !important;
}
.constrc-item.active7:after {
  border-left-color: #9c27b0 !important;
}
.constrc-item.active8:after {
  border-left-color: #d9b3b3 !important;
}

.constrc-item {
  display: inline-block;
  min-width: 85px;
  position: relative;
  cursor: pointer;

  margin-left: 3px;
  text-align: center;
  &:before {
    content: "";
    display: block;
    border-top: 13.5px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 14px solid #fff;
    position: absolute;
    left: 0px;
    top: 0;
  }
  &:after {
    content: "";
    display: block;
    border-top: 13.5px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 14px solid #50abe4;
    position: absolute;
    right: -14px;
    top: 0;
    z-index: 10;
  }
  .text-color {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    padding: 2px 0;
    div {
      i {
        float: left;
        padding-left: 20px;
        &.el-icon-caret-bottom {
          color: red;
          font-size: 35px;
          position: absolute;
          top: -18px;
          left: -18px;
        }
        &:last-child {
          float: right;
          padding-right: 8px;
          padding-top: 4px;
        }
      }
      span {
        padding-left: 25px;
        padding-right: 5px;
        font-size: 16px;
      }
    }
    p {
      font-size: 13px;
      margin: 2px 0;
    }
  }
}
.list-item-box {
  display: flex;
  align-items: center;
  padding-top: 15px;
  &:first-child {
    padding-top: 0;
  }
  &:last-child {
    padding: 15px 0;
  }
}
.constrc-box {
  white-space: nowrap;
  & > div:nth-child(1) {
    padding-bottom: 5px;
    color: #5cb85c;
  }
  & > div:nth-child(2) {
    margin-left: 0;
    &:before {
      border-left: 14px solid transparent;
    }
    .text-color > div {
      i {
        padding-left: 0;
        &.el-icon-caret-bottom {
          left: -5px;
        }
      }
      span {
        padding-left: 5px;
      }
    }
  }
}
</style>
